<p style="margin-bottom: 0px">&nbsp;</p>
<div nz-row [nzGutter]="16">
  <div nz-col [nzMd]="6">
      <nz-card>
        <nz-input-group [nzSuffix]="suffixIcon">
          <input type="text" nz-input placeholder="{{'filtertext' | translate}}" [(ngModel)]="searchValue">
        </nz-input-group>
        <ng-template #suffixIcon>
          <i class="anticon anticon-search"></i>
        </ng-template>
        <div class="treeArea" style="margin-top: 8px; max-height: 800px; overflow: auto">
          <div *ngIf="nodes.length === 0" style="margin: 0 auto; width: 100%; text-align: center">No data</div>
          <nz-tree
              [nzSearchValue]="searchValue"
              (nzOnSearchNode)="mouseAction('search',$event)"
              [(ngModel)]="nodes"
              [nzShowLine]="true"
              [nzDraggable]="false"
              [nzDefaultExpandAll]="true"
              [nzDefaultSelectedKeys]="defaultSelectKeys"
              (nzExpandChange)="mouseAction('expand',$event)"
              (nzClick)="mouseAction('click',$event)"
              (nzOnDragStart)="mouseAction('dragstart',$event)"
              (nzOnDragEnter)="mouseAction('enter',$event)"
              (nzOnDragLeave)="mouseAction('leave', $event)"
              (nzOnDrop)="mouseAction('drop', $event)"
              (nzOnDragEnd)="mouseAction('end', $event)">
          </nz-tree>
        </div>
      </nz-card>
  </div>
  <div nz-col [nzMd]="18">
    <nz-card nzTitle="{{'leveltwo' | translate }}" [nzExtra]="addTemplate" [nzBordered]="false"> 
      <form nz-form [nzLayout]="'inline'" class="search__form">
        <nz-row [nzGutter]="8">
          <nz-col nzMd="6" nzSm="24">
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="account">{{'account' | translate}}</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input [(ngModel)]="q.account" name="account" id="account">
              </nz-form-control>
            </nz-form-item>
          </nz-col>
          <nz-col nzMd="6" nzSm="24">
            <nz-form-item>
              <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name">{{'name' | translate}}</nz-form-label>
              <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input [(ngModel)]="q.name" name="name" id="name">
              </nz-form-control>
            </nz-form-item>
          </nz-col>
          <nz-col nzMd="6" nzSm="24">
            <button nz-button type="button" [nzType]="'primary'" (click)="st.load(1, q)">{{'search' | translate}}</button>
          </nz-col>
        </nz-row>
      </form>          
      <simple-table #st
          style="margin-top: 8px;"
          [columns]="columns"
          [data]="url"
          [ps]="ps"
          [extraParams]="q"
          [resReName]="{ total: 'data.total', list: 'data.rows' }"
          [reqReName]="{ pi:'pageNumber', ps: 'pageSize' }"          
          [showTotal]="true"
          [showPagination]="true"
          [showSizeChanger]="true"                       
          >
          <ng-template st-row="isDisabled" let-item let-index="index">
              <nz-badge *ngIf="item.is_disabled === '1'" nzStatus="error" nzText="{{'disable' | translate}}"></nz-badge>
              <nz-badge *ngIf="item.is_disabled === '0'" nzStatus="success" nzText="{{'normal' | translate }}"></nz-badge>
          </ng-template>
      </simple-table>
      
      <ng-template #addTemplate>
          <button type="button" (click)="addClient()" nzSize="default" nz-button nzType="default">{{'add' | translate}}</button>
      </ng-template>
    </nz-card>
  </div>

</div>


